<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>瀑布流</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		#main{position: relative;}
		.pic{width: 300px;height: 300px;padding:15px 0 0 10px;border:1px solid red;float: left;background-color: #808090}
		.pic1{width: 300px;height: 400px;padding:15px 0 0 10px;border:1px solid red;float: left;background-color: #808090}
		.pic2{width: 300px;height: 500px;padding:15px 0 0 10px;border:1px solid red;float: left;background-color: #808090}
		.box{
			/*overflow: hidden;*/
			position: relative;
		}
		/*使用padding拉开图片之间的距离*/
		/*offsetheight 不包括高度*/
	</style>
</head>
<body>
	<!-- js原生 jquery css3多栏布局 -->
	<div id="main">
		<div class="box" id="box">
			<div class="pic">1</div>
			<div class="pic1">2</div>
			<div class="pic">3</div>
			<div class="pic2">4</div>
			<div class="pic1">5</div>
			<div class="pic">6</div>
			<div class="pic">7</div>
			<div class="pic1">8</div>
			<div class="pic">9</div>
			<div class="pic2">10</div>
			<div class="pic">11</div>
			<div class="pic1">12</div>
			<div class="pic">13</div>
			<div class="pic1">14</div>
			<div class="pic1">15</div>
			<div class="pic">16</div>
			<div class="pic2">17</div>
			<div class="pic">18</div>
			<div class="pic1">19</div>
			<div class="pic">20</div>
			<div class="pic1">21</div><div class="pic">22</div>
			<div class="pic2">23</div>
			<div class="pic">24</div>
			<div class="pic1">25</div>
			<div class="pic">26</div>
			<div class="pic1">27</div>
			<div class="pic">28</div>
			<div class="pic">29</div>
			<div class="pic1">30</div>
			<div class="pic">31</div>
			<div class="pic2">32</div>
			<div class="pic">33</div>
			<div class="pic">34</div>
			<div class="pic1">35</div>
			<div class="pic">36</div>
			<div class="pic1">37</div>
			<div class="pic">38</div>
			<div class="pic">39</div>
			<div class="pic1">40</div>
			<div class="pic">41</div>
			<div class="pic2">42</div>
			<div class="pic">43</div>
		</div>
	</div>
</body>
<script>
	// function waterfall(){
		var par=document.getElementById('box');
		console.log(par);
		var child=par.getElementsByTagName('div');
		console.log(child);
		// 计算列数
		var width=child[0].offsetWidth;
		var cols=Math.floor(document.documentElement.clientWidth/width);
		console.log(cols);
		console.log(width);
		par.style.cssText='width:'+width*cols+'px;margin:auto'
	// }
	// waterfall();
	var harr=[];
	for(var i=0;i<child.length;i++){

		if(i<cols){
			harr.push(child[i].offsetHeight)
		}else{
			var minh=Math.min.apply(null,harr);
			for(var j=0;j<harr.length;j++){
				if(harr[j]==minh){
					var ind=j
				}
			}
			child[i].style.position='absolute';
			child[i].style.top=minh+'px';
			child[i].style.left=width*ind+'px';
			harr[ind]+=child[i].offsetHeight;
		}
	}
lasth=child[child.length-1].offsetTop
window.onscroll=function(){
	var scrollh=document.body.scrollTop||document.documentElement.scrollTop;
	var winh=document.body.clientHeight||document.documentElement.clientHeight;
	console.log(scrollh);
	console.log(winh);
	if((scrollh+winh)>lasth){
		alert('load')//append and waterfall... 待优化
	}
}
</script>
</html>